<!-- 评论 -->
<div id="comments-template">
    <div class="comments-container comments-root-container" id="comments-content">
        <div>
            <h3 class="comments-header-container alert alert-info">
                <i class="fa fa-comments"></i>
                [[${comments.total}]]条评论
            </h3>
        </div>
        <div>
            <ul class="comments-comments-container comment-list" id="comment-list">
                <li th:each="item:${comments.getRecords()}" th:id="${item.id}" class="comment-item">
                    <article class="comment-body">
                        <footer class="comment-meta">
                            <div class="comment-author vcard">
                                <img width="66" height="66" th:src="'https://secure.gravatar.com/avatar/'+${item.emailMd5}">
                                <b class="fn" th:text="${item.author}"></b>
                                <span class="says">说：</span>
                            </div>
                            <div class="comment-metadata">
                                <a>
                                    <time th:datetime="${item.createTime}"
                                          th:text="${#dates.format(item.createTime,'yyyy年MM月dd日 HH:mm:ss')}"></time>
                                </a>
                            </div>
                        </footer>
                        <div class="comment-content">
                            <p th:utext="${item.content}"></p>
                        </div>
                        <div class="reply">
                            <!--                            <a th:unless="${session.USER}" rel="nofollow" class="comment-reply-login"-->
                            <!--                               th:href="'/login?redirect_to='+${#request.getRequestURL()}+'#'+${item.id}">登录以回复</a>-->
                            <a rel="nofollow" class="comment-reply-link"
                               th:onclick="'reply('+${item.id}+')'">回复</a>
                        </div>
                    </article>
                    <ol class="children" style="padding-left: 20px;">
                        <li th:each="reply,replyStat:${item.subComments}" th:id="${reply.id}">
                            <article class="comment-body comment-children">
                                <footer class="comment-meta">
                                    <div class="comment-author vcard">
                                        <img th:src="'https://secure.gravatar.com/avatar/'+${reply.emailMd5}"
                                             width="54"
                                             height="54">
                                        <b class="fn" th:text="${reply.author}"></b>
                                        回复 <b class="fn" th:text="${reply.replyUserName}"></b>
                                        <span class="says">说：</span>
                                    </div>
                                    <div class="comment-metadata">
                                        <time th:datetime="${reply.createTime}"
                                              th:text="${#dates.format(reply.createTime,'yyyy年MM月dd日 HH:mm:ss')}"></time>
                                    </div>
                                </footer>
                                <div class="comment-content">
                                    <p th:utext="${reply.content}"></p>
                                </div>
                                <div class="reply"><a class="comment-reply-link">回复</a></div>
                            </article>
                        </li>
                    </ol>
                </li>
            </ul>
            <th:block th:if="${comments.hasNext()}">
                <button class="btn btn-danger btn-lg btn-block" id="more-comments">点击加载更多...</button>
                <script th:inline="javascript">
                    let current = [[${comments.current}]];
                    let pages = [[${comments.pages}]];
                    let size = [[${comments.size}]];
                    let articleId = [[${info.id}]];
                    $('#more-comments').click(function () {
                        $(this).addClass("disabled");
                        $.get("comment/more", {current: ++current, size: size, articleId: articleId},
                            function (data) {
                                for (let item of data) {
                                    let li = "<li><article class='comment-body'><footer class='comment-meta'><div class='comment-author vcard'><img src='https://secure.gravatar.com/avatar/" + item.user.avatar + "?s=54'/><b class='fn'>" + item.author + "</b>";
                                    if (item.comments.length > 0) {
                                        li += "回复 <b class='fn'>" + item.comments[0].author + "</b>";
                                    }
                                    li += "<span class='says'>说：</span></div><div class='comment-metadata'>" + item.createTime.replace(/(\d{4})-(\d{2})-(\d{2})T(\d{2}:\d{2}:\d{2}).*/, "$1年$2月$3日 $4") + "</div></footer><div class='comment-content'><p>" + item.content + "</p></div><div class='reply'><a class='comment-reply-login'>回复</a></div></article>";
                                    if (item.comments.length > 0) {
                                        li += "<article class='comment-body comment-children'>";
                                        for (let i in item.comments) {
                                            li += "<footer class='comment-meta'><div class='comment-author vcard'><img src='https://secure.gravatar.com/avatar/" + item.comments[i].user.avatar + "' width='54' height='54'><b class='fn'>" + item.comments[i].author + "</b>";
                                            if (i < item.comments.length) {
                                                li += "回复 <b class='fn'>" + item.comments[i + 1].author + "</b>";
                                            }
                                            li += "<span class='says'>说：</span></div><div class='comment-metadata'>" + item.createTime.replace(/(\d{4})-(\d{2})-(\d{2})T(\d{2}:\d{2}:\d{2}).*/, "$1年$2月$3日 $4") + "</div></footer><div class='comment-content'><p>" + item.comments[i].content + "</p></div><div class='reply'><a class='comment-reply-link'>回复</a></div></article>";
                                        }
                                    }
                                    li += "</li>";
                                    $('#comment-list').append(li);
                                }
                            });
                        if (pages <= current) {
                            $(this).hide();
                        } else {
                            $(this).removeClass("disabled");
                        }
                    })
                </script>
            </th:block>
        </div>
        <div id="respond">
            <div class="comments-editor-container">
                <h3 class="comment-reply-title" id="reply-title"><i class="fa fa-pencil"></i> 欢迎留言
                    <small><a rel="nofollow" id="cancel-comment-reply-link" style="display: none;">取消回复</a></small>
                </h3>
                <form id="commentform" class="comment-form form-inline">
                    <div class="form-group" style="margin: 15px 10px 20px 15px;">
                        <label for="author">昵称：</label>
                        <input type="text" class="comment-input" id="author" name="author" value="" placeholder="请输入昵称"/>
                    </div>
                    <div class="form-group" style="margin: 15px 10px 20px 10px;">
                        <label for="email">邮箱：</label>
                        <input type="text" class="comment-input" id="email" name="email" value="" placeholder="请输入邮箱"/>
                    </div>
                    <div class="comments-editor-write-field">
                        <input type="hidden" id="articleId" th:value="${info.id}"/>
                        <input type="hidden" id="targetId" name="targetId" th:value="${info.id}"/>
                        <input type="hidden" id="targetType" name="targetType" value="1"/>
                        <input type="hidden" id="parentId" name="parentId" value=""/>
                        <textarea class="comments-editor-write-field" id="content" placeholder="赶快发表你的见解吧！"
                                  name="content" cols="45" rows="8"
                                  aria-required="true"></textarea>
                    </div>
                    <div id="loading" style="display: none;"><i class="fa fa-spinner fa-spin"></i> 正在提交, 请稍候...
                    </div>
                    <p class="form-submit">
                        <input type="submit" id="comment-submit" class="comments-editor-submit" value="发表评论">
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>